<template>
  <div class="app">
    <!-- views/Register.vue -->
    <mt-header title="注册">
      <mt-button icon="back" slot="left" @click="$router.go(-1)"></mt-button>
      <router-link to="/login" slot="right">登录</router-link>
    </mt-header>
    <img src="../assets/log/WechatIMG1408.png" @click="$router.push('/')">
    <!-- 表单 -->
    <div class="register">
      <mt-field
        @blur.native.capture="checkName"
        type="text"
        placeholder="请输入账号"
        label="账号"
        v-model="name"
        :state="nameState"
      ></mt-field>

      <mt-field
        @blur.native.capture="checkPwd"
        type="password"
        placeholder="请输入6~16数字或字母"
        label="密码"
        v-model="upwd"
        :state="pwdState"
      ></mt-field>

      <mt-field
        @blur.native.capture="checkPwd2"
        type="password"
        placeholder="请再次输入密码"
        label="重复密码"
        v-model="upwd2"
        :state="pwd2State"
      ></mt-field>

      <mt-field
        @blur.native.capture="checkPhone"
        type="text"
        placeholder="请输入手机号码"
        label="手机号码"
        v-model="phone"
        :state="phoneState"
      >
      </mt-field>

      <mt-field
        @blur.native.capture="checkAuth"
        type="text"
        placeholder="请输入验证码"
        label="验证码"
        v-model="auth"
        :state="authState"
      >
        <mt-button
          id="btn"
          @click.native.capture="count"
          size="small"
          :disabled="AuthBoolean"
          type="primary"
          >{{ authCode }}</mt-button
        >
      </mt-field>

      <mt-button @click.native.capture="checkForm" type="primary" size="large">立即注册</mt-button>
    </div>
  </div>
</template>
<script>
import { Toast } from "mint-ui";
export default {
  watch: {
    authCode(newvalue, oldvalue) {
      if (newvalue == 0) {
        this.authCode = "获取验证码";
        this.AuthBoolean = false;
        btn.style = "background-color: rgb(99, 190, 91) ;";
      }
    },
  },
  data() {
    return {
      name: "", // 绑定账号输入框的值
      nameState: "", // 绑定账号输入框的state属性值
      upwd: "",
      pwdState: "",
      upwd2: "",
      pwd2State: "",
      phone: "",
      phoneState: "",
      auth: "",
      authState: "",
      authCode: "获取验证码",
      AuthBoolean: false,
      phoneBoolean:'',
    };
  },
  methods: {
    checkForm() {
      // 点击提交按钮，验证整张表单
      // console.log("注册11111");
      if (
        this.checkName() &&
        this.checkPwd() &&
        this.checkPwd2() &&
        this.phoneBoolean &&
        this.checkAuth()
      ) {
        // console.log("注册22222");
        var url = "users/register";
        var params = `uname=${this.name}&upwd=${this.$md5(this.upwd)}&phone=${
          this.phone}&auth=${this.auth}`;
        this.axios.post(url, params).then(res => {
          if (res.data.code == 200) {
            Toast({
              message: res.data.msg,
              iconClass: "icon icon-success",
            });
            this.$router.push("/login");
          } else {
            Toast({
              message: res.data.msg,
              iconClass: "icon icon-success",
            });
          }
        });
      } else {
      }
    },

    count() {
      //短信验证码按钮
      btn.style = "background-color:#aaa ;";
      this.AuthBoolean = true;
      this.authCode = 60;
      if (this.authCode > 0) {
        var timer = setInterval(() => {
          this.authCode--;
          if (this.authCode == 0) {
            clearInterval(timer);
          }
        }, 1000);
      }
    },

    checkAuth() {
      // 用于验证确认验证码输入框的值是否符合要求
      if (!this.auth) {
        this.authState = "error";
        return false;
      } else {
        this.authState = "success";
        return true;
      }
    },

    checkPhone() {
      // 用于验证确认手机号输入框的值是否符合要求
      let pipei = /^1[3-9]\d{9}$/;
      let url = `users/getPhone?phone=${this.phone}`;
      if (this.phone && pipei.test(this.phone)) {
        this.axios.get(url).then(res => {
          if (res.data.code != 200) {
            Toast({
              message: res.data.msg,
              iconClass: "icon icon-success",
            });
            this.phoneState = "middle";
            this.phoneBoolean =  false;
          } else {
            this.phoneState = "success";
            this.phoneBoolean = true;
          }
        });
      } else {
        this.phoneState = "error";
        return false;
      }
    },

    checkPwd2() {
      // 用于验证确认密码输入框的值是否符合要求
      let exp = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
      if (!this.upwd2) {
        this.pwd2State = "error";
        return false;
      } else {
        if (this.upwd == this.upwd2) {
          this.pwd2State = "success";
          return true;
        } else {
          this.pwd2State = "error";
          return false;
        }
      }
    },

    checkPwd() {
      // 用于验证密码输入框的值是否符合要求
      let exp = /^[a-zA-Z0-9_-]{6,16}$/;
      if (!this.upwd) {
        this.pwdState = "error";
        return false;
      } else {
        if (exp.test(this.upwd)) {
          this.pwdState = "success";
          return true;
        } else {
          this.pwdState = "error";
          return false;
        }
      }
    },

    checkName() {
      let exp = /^\w{3,16}$/;
      if (this.name && exp.test(this.name)) {
        this.nameState = "success";
        return true;
      } else {
        this.nameState = "error";
        return false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.mint-header {
  background-color: rgb(99, 190, 91);
  a {
    text-decoration: none;
  }
}

.app{
  height: 100vh;
  background-color: rgb(230, 250, 251);
  >img{
    width:35vw ;
    margin: 10px 50% 0;
    transform: translateX(-50%);
  }
  >.register{
    width: 350px;
    margin: 10% auto;
    padding: 5px;
    background-color: white;
    border-radius: 10px;
    >a{
      margin: 10px;
      padding: 0;
    }
    > button{
      width: 300px;
      margin: 20px auto 10px;
      padding: 5px;
      border-radius: 10px;
      background-image: linear-gradient(124.85deg,#3ed2cb -20.29%,#82f172 107.31%);
    }
  }
}

::v-deep .mint-cell-wrapper{
  background-image:none;
  padding:0;
}

#btn {
  width: 100px;
  background-image: linear-gradient(124.85deg,#3ed2cb -20.29%,#82f172 107.31%);
}

</style>
